<template>
  <div>
    <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
      <router-link :to="`/home/special?id=${item.id}`" class="li" v-for="item in data" :key="item.id">
        <div class="t-img">
          <img :src="item.scene_pic_url" alt />
        </div>
        <div class="info">
          <p class="title">{{item.title}}</p>
          <p class="txt">{{item.subtitle}}</p>
          <p class="price">{{item.price_info}}元起</p>
        </div>
      </router-link>
    </van-list>
  </div>
</template>

<script>
import { listaction } from "@/api/home";
export default {
  data() {
    return {
      page: 1,
      data: [],
      loading: false,
      finished: false
    };
  },
  // watch:{
  //   "$route":function(to,from){
  //     console.log(to);
  //   }
  // },
  methods: {
    onLoad() {
      listaction({
        page: this.page
      }).then(res => {
        // console.log(res);
        this.data.push(...res.data);
        this.page += 1;
        this.loading = false;
        if (res.total == this.page - 1) {
          this.finished = true;
        }
      });
    }
  },
  created() {}
};
</script>

<style lang="scss" scoped>
.li {
  background: #fff;
  text-align: center;
  padding-bottom: 0.26667rem;
  margin-bottom: 0.26667rem;
  .t-img {
    width: 100%;
    height: 5.53333rem;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .info {
    height: 3rem;
    .title {
      color: #333;
      font-size: 0.46667rem;
      margin-top: 0.4rem;
    }
    .txt {
      color: #999;
      font-size: 0.32rem;
      margin-top: 0.21333rem;
      padding: 0 0.26667rem;
    }
    .price {
      color: #b4282d;
      font-size: 0.36rem;
      margin-top: 0.26667rem;
    }
  }
}
</style>